<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        #div_body {
            display: flex;
            height: 100vh;
            width: 100vw;
            justify-content: center;
            align-items: center;
        }

        #zhuanpan {
            width: 640px;
            height: 640px;
            background: url('./img/lotteryContent.png') no-repeat;
        }

        #zhizhen {
            background: url('./img/lotteryBtn.png') no-repeat;
            width: 252px;
            height: 252px;
            position: absolute;
            left: calc(50% - 126px);
            top: calc(50% - 126px);
        }
    </style>
</head>

<body>

<div id="div_body">
    <div id="zhuanpan">
        <div id="zhizhen">
        </div>
    </div>
</div>


<script>
    window.onload = function () {
        var prize_arry = [
            {name: '10M流量', Stock: 10, chance: 385},
            {name: 'iPhone7', Stock: 10, chance: 285},
            {name: '30M流量', Stock: 10, chance: 184},
            {name: '5元话费', Stock: 10, chance: 83},
            {name: 'ipad mini 4', Stock: 10, chance: 52},
            {name: '20元话费', Stock: 10, chance: 11}
        ];
        var zhizhen = document.getElementById('zhizhen');//指针
        var huanchong_timer = null;
        var huojiang_jiaodu = null;
        var move_flg = false;
        var frequency = 3;//可抽奖次数
        var prize_title = null;//获奖名称

        zhizhen.onclick = function () {
            if (frequency === 0 && move_flg === false) {//抽奖次数是否用完
                alert('次数用完');
                return;
            }
            if (move_flg === false) {//是否正在转动
                frequency--;
                //var winning = Math.floor((Math.random() * prize_arry.length + 1));//随机获取奖品
                huojiang_jiaodu = (huojiang_jiaodu + 360 / prize_arry.length * random_prize(prize_arry)) + 4 * 360;//获取奖品的度数,加一次huojiang_jiaodu表示保存上次指针的位置
                prize_title = prize_arry[(huojiang_jiaodu - parseInt(huojiang_jiaodu / 360) * 360) / 60].name;//指针最后停止的角度（即奖品的度数）;huojiang_jiaodu/360得到的度数再parseInt取整再*360表示转的完整圈数，huojiang_jiaodu再减去取整后的度数就是指针最后走过的度数
                console.log(huojiang_jiaodu);
                huanchong_move(zhizhen, huojiang_jiaodu, prize_title);
            }
        };


        function huanchong_move(type, huanchong_juli, prize_name) {
            if (move_flg === true) {//如果正在旋转状态则不继续执行，等待前一次执行完
                return;
            }
            move_flg = true;
            huanchong_timer = setInterval(function () {
                yizou = Number(type.style.transform.replace(/[^0-9]/ig, ""));
                var sudu = (huanchong_juli - yizou) / 50;
                if (sudu > 0) {
                    sudu = Math.ceil(sudu);
                }
                if (yizou === huanchong_juli) {
                    move_flg = false;
                    clearInterval(huanchong_timer);
                    alert(prize_name);
                } else {
                    type.style.transform = 'rotate(' + (yizou + sudu) + 'deg)';
                }
            }, 30)
        }//封装指针动画

        function random_prize(type) {
            var sum = null;
            for (var x = 0; x < type.length; x++) {//计算获奖概率总和
                sum = sum + type[x].chance
            }
            for (var i = 0; i < type.length; i++) {
                random_num = Math.floor((Math.random() * sum + 1));//获取 0-chance总和之间的一个随随机整数
                if (random_num <= type[i].chance) {//如果奖品的chance大于等于随机数random_num，则返回该chance在数组内对应的下标
                    return i;//返回对应奖品的下标
                } else {
                    sum -= type[i].chance;//否则减去当前的概率范围,进入下一轮循环
                }

            }
        }

    }
</script>
</body>
</html>
